<template>
  <view class="receipt-info">
    <view class="box-top">
      <view class="declare">
        <view class="title">指定用药管理方案</view>
        <view class="des">
          所有加入该计划的用户均需制定个人用药管理方案。平台将根据您的方案定期指定专业机构为您邮寄药品，并提供专业用药管理服务。
        </view>
        <view class="help"><text class="icon">?</text>为什么需要指定用药管理方案?</view>
      </view>
    </view>

    <view class="plan-box">
      <view class="title">计划邮寄药品周期</view>
      <view class="cell after" @click="pickupSelect">
        <text v-if="!estimatedPickupPeriod">请选择收件周期</text>
        <text v-else style="color: rgba(0, 0, 0, 0.55)">{{ estimatedPickupPeriod | estimatedPickupPeriodTxt }}</text>
      </view>
      <view class="cell after">
        <picker mode="selector" :value="estimatedPickupDay - 1" :range="days" @change="dayChange">
          <text v-if="!estimatedPickupDay">请选择收件日期</text>
          <text v-else style="color: rgba(0, 0, 0, 0.55)">{{ estimatedPickupDay | estimatedPickupDayTxt }}</text>
        </picker>
      </view>
    </view>

    <view class="plan-box add-box">
      <view class="title">计划收件地址</view>
      <view class="cell">
        <input
          class="cell-input"
          :value="name"
          placeholder-style="color:rgba(0, 0, 0, 0.3)"
          placeholder="请填写收件人姓名"
          @input="nameInput"
        />
      </view>
      <view class="cell">
        <input
          class="cell-input"
          type="number"
          :value="phone"
          placeholder-style="color:rgba(0, 0, 0, 0.3)"
          placeholder="请填写收件人联系方式"
          @input="phoneInput"
        />
      </view>
      <view class="cell after">
        <picker mode="region" @change="regionChange">
          <text v-if="!shippingAddress">请选择省市区</text>
          <text v-else style="color: rgba(0, 0, 0, 0.55)"
            >{{ shippingAddress.value[0] }} {{ shippingAddress.value[1] }} {{ shippingAddress.value[2] }}</text
          >
        </picker>
      </view>
      <view class="cell">
        <input
          class="cell-input"
          placeholder-style="color:rgba(0, 0, 0, 0.3)"
          placeholder="请输入详细地址，如：XX街道XX社区XX单元XX房间"
          :value="street"
          @input="addInputUpdate"
        />
      </view>
    </view>

    <view v-if="nextOk" class="submit" @click="next">下一步</view>
    <!-- <view class="submit no-bg" @click="go_home">稍后再说</view> -->

    <!-- 收件周期选择 -->
    <mp-actionsheet
      title="周期选择"
      :show="periodShow"
      :actions="groups"
      @actiontap="pickupValue"
      @close="pickupClose"
    ></mp-actionsheet>
  </view>
</template>

<script>
/**
 * 废弃
 */
import { mapState } from 'vuex';
export default {
  filters: {
    estimatedPickupPeriodTxt: function (i) {
      const groups = {
        1: '每月一次',
        2: '每两月一次',
        3: '每三月一次'
      };
      return groups[Number(i)];
    },
    estimatedPickupDayTxt: function (d) {
      const arr = [];
      for (let i = 1; i < 29; i++) {
        arr.push(i + '日');
      }
      return arr[d - 1];
    }
  },
  data() {
    return {
      periodShow: false, // 收件周期
      groups: [
        { text: '每月一次', value: 1 },
        { text: '每两月一次', value: 2 },
        { text: '每三月一次', value: 3 }
      ]
    };
  },

  computed: {
    days: function () {
      const arr = [];
      for (let i = 1; i < 29; i++) {
        arr.push(i + '日');
      }
      return arr;
    },
    // 是否展示下一步按钮
    nextOk: function () {
      let bol = false;
      if (this.estimatedPickupPeriod && this.estimatedPickupDay && this.shippingAddress && this.street) {
        bol = true;
      }
      return bol;
    },
    ...mapState('assess', {
      name: 'name',
      phone: 'phone',
      estimatedPickupPeriod: 'estimatedPickupPeriod',
      estimatedPickupDay: 'estimatedPickupDay',
      shippingAddress: 'shippingAddress',
      street: 'street'
    })
  },

  methods: {
    // 周期选择显示弹出
    pickupSelect() {
      this.periodShow = true;
    },

    // 周期弹窗关闭
    pickupClose() {
      this.periodShow = false;
    },

    // 姓名
    nameInput(e) {
      this.$store.commit('assess/SET_NAME', e.detail.value.trim());
    },

    // 电话
    phoneInput(e) {
      this.$store.commit('assess/SET_PHONE', e.detail.value.trim());
    },

    // 收件周期点击选项
    pickupValue(e) {
      this.$store.commit('assess/SET_PERIOD', e.detail.value);
      this.periodShow = false;
    },

    // 日期选择
    dayChange(e) {
      this.$store.commit('assess/SET_DAY', Number(e.detail.value) + 1);
    },

    // 省市区选择
    regionChange(e) {
      this.$store.commit('assess/SET_ADDRESS', e.detail);
    },

    // 详细地址
    addInputUpdate(e) {
      this.$store.commit('assess/SET_STREET', e.detail.value.trim());
    },

    // 下一步
    next() {
      const telReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (!telReg.test(this.phone)) {
        uni.showToast({
          title: '手机号有误，请重新输入！',
          duration: 2000,
          icon: 'none'
        });
        return;
      }

      // const data = {
      //   name: this.name,
      //   phone: this.phone,
      //   estimatedPickupPeriod: this.estimatedPickupPeriod,
      //   estimatedPickupDay: this.estimatedPickupDay,
      //   shippingAddress: {
      //     provincesId: this.shippingAddress.code[0],
      //     cityId: this.shippingAddress.code[1],
      //     areaId: this.shippingAddress.code[2]
      //   }
      // };
      // console.log(data);
      this.$wxPromise.navigateTo({
        url: '/pages/submitApp/index'
      });
    }
  }
};
</script>

<style lang="scss">
.receipt-info {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .box-top {
    background: linear-gradient(186deg, #fb6f6f 0%, #f63434 100%);
    height: 560rpx;
    border-top: 1px solid #fb6f6f;
  }
  .help {
    font-size: 24rpx;
    display: inline-block;
    color: #2680eb;
    background: rgba(38, 128, 235, 0.1);
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    .icon {
      border-radius: 50%;
      border: 1px solid #2680eb;
      display: inline-block;
      width: 26rpx;
      height: 26rpx;
      line-height: 26rpx;
      text-align: center;
      font-size: 22rpx;
      margin-right: 16rpx;
      vertical-align: middle;
    }
  }
  .declare {
    margin: 24rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 36rpx 22rpx 36rpx 32rpx;

    .title {
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 500;
    }
    .des {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.55);
      margin: 20rpx 0 20rpx;
    }
  }
  .plan-box {
    background: #ffffff;
    padding: 36rpx 32rpx 0;
    border-radius: 24rpx;
    margin: -156rpx 24rpx 0;
    .title {
      font-size: 36rpx;
      color: rgba(0, 0, 0, 0.9);
      font-weight: 500;
    }
    .cell {
      font-size: 28rpx;
      height: 100rpx;
      line-height: 100rpx;
      color: rgba(0, 0, 0, 0.3);
      border-bottom: 1px solid #efefef;
      position: relative;
    }
    .after::after {
      content: ' ';
      position: absolute;
      top: 46rpx;
      right: 20rpx;
      width: 0px;
      height: 0px;
      border-top: 14rpx solid #999999;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
    }
    .cell:last-child {
      border: none;
    }
  }
  .add-box {
    margin-top: 24rpx;
    margin-bottom: 50rpx;
  }
  .cell-input {
    height: 100rpx;
    color: rgba(0, 0, 0, 0.55);
  }
  .submit {
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    border-radius: 44rpx;
    margin: auto 24rpx;
    height: 88rpx;
    font-size: 36rpx;
    color: #ffffff;
    text-align: center;
    line-height: 88rpx;
  }
  .no-bg {
    background: none;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 26rpx;
  }
}
</style>
